<template>
  <div ref="vantaRef" style="width: 100%;margin: 0 auto;overflow: hidden; height: 600px">
    <div id="main_div" style="overflow: hidden;margin-top:40px ">
      <el-card style="width: 500px;height: 300px;margin: 50px auto">
        <el-form label-width="80px" style="margin-top: 50px;width: 430px;">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="primary" style="position: relative;right: 30px;" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

export default {
  name: "LoginView",
  data() {
    return {
      user: {username: '', password: ''},
    }
  },
  methods: {
    login() {
      let data=this.qs.stringify( this.user);
      //默认为同源策略  network 未实现跨域访问
      this.axios.post('http://localhost:37000/v1/users/login',data)
      .then((response)=>{
        if(response.data.code==20000){
          this.user=response.data.data;
          let userlogin=JSON.stringify(this.user);
          localStorage.setItem("user",userlogin); //以JSON格式存到localStorage:类似于map
          this.$message.success("登录成功！");
          location.href='/member'
        }else{
          this.$message.error(response.data.message);
        }
      })

    },
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 600.0,
      minWidth: 400.0,
      scale: 1.0,
      color1: '#0092FF',
      color2: '#0092FF',
      backgroundColor: '#1a2f42'
    });
  }
}
</script>

<style scoped>

</style>